
<template>
  <el-form
  
    :model="dynamicValidateForm"
    ref="dynamicValidateForm"
    label-width="100px"
    class="demo-dynamic login-container"
  >
    <div class="head-img">
      <el-avatar :size="60"> admin </el-avatar>
    </div>
    <el-form-item
      prop="userName"
      label="用户名"
      :rules="[
        { required: true, message: '请输入用户名', trigger: 'blur' },
        {
          min: 3, max: 5,
          message: '请输入正确的用户名',
          trigger: ['blur', 'change'],
        },
      ]"
    >
      <el-input v-model="dynamicValidateForm.userName"></el-input>
    </el-form-item>
    <el-form-item
      prop="psd"
      label="密码"
      :rules="[
        { required: true, message: '请输入密码', trigger: 'blur' },
        {
          tmin: 3, max: 5,
          message: '请输入正确的密码',
          trigger: ['blur', 'change'],
        },
      ]"
    >
      <el-input v-model="dynamicValidateForm.psd"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button>
      <el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { login } from './http/api'
export default {
  data() {
    return {
      dynamicValidateForm: {
        psd: "",
        userName: "",
      }
    };
  },
  methods: {
    submitForm(formName) {
      console.log(111)
      console.log('this', this)
      // let _this = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log('this.data.dynamicValidateForm', this.$data.dynamicValidateForm)
          this.login(this.$data.dynamicValidateForm)
          
          // alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    login (data) {
      console.log(2222, data)
        //  alert("submit!"); 
      login(data).then((response) =>{  
        if (response.resultCode === 1) {
          location.href="http://localhost:8080/"
        }      
          console.log(response)       //请求成功返回的数据
      }).catch((error) =>{
          console.log(error)
      })
      // this.$http.post(',data).then((response) => {
      //   console.log(response.data)
      // })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  },
};
</script>

<style lang="less">
.login-container {
  // transform: translateY(50%);
  padding: 18px 24px;
  background-color: #fafafa;
  border: 1px solid #eaeefb;
  margin-bottom: 25px;
  border-radius: 4px;
  width: 35vw;
  height: 30vh;
  max-width: 300px;
  margin: auto;
  transform: translateY(50%);
  min-width: 350px;
  .head-img {
    >span {
      margin: 0 auto;
    }
    margin-bottom: 20px;
    text-align: center;
  }
}
</style>
